<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
</head>
  <style>
        .myColor:nth-child(odd) {
                background-color:gainsboro;
                }
        .layui-btn{
            padding: 0 12px !important;
            margin-top: -5px;
        }
  </style>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div id="Myloading2" style=" float: left; margin-left: 45%; margin-top:10%;"><img src="../../../lib/layui-v2.5.5/css/modules/layer/default/loading-01.gif" alt=""></div>
<!-- 显示曲线图 -->
        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md12">
                <div id="echarts-pies" style="background-color:#ffffff;height: 520px; padding: 10px"></div>
            </div>
        </div>
    </div>
</div>
<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../../lib/dateTime/jquery-1.8.3.min.js"></script>
<!-- <script crossorigin="anonymous" integrity="sha384-S8KxbKBp9r6kPbM3+2n8fFV+5y572FLD7+A39mF0lb410iPTIfZC6hKxEpRS87NO" src="https://lib.baomitu.com/echarts/4.6.0/echarts-en.common.js"></script> -->
<!-- <script src="../../../js/jquery.table2excel.min.js"></script>  -->

<script>
    layui.use(['layer','echarts'], function () {

// 2020-03-25 HF sessionStorage中取出数据
 var token = sessionStorage.getItem('newtoken');
 var code = sessionStorage.getItem('HsaveOverHaul_code');
 var type = sessionStorage.getItem('HsaveOverHaul_type'); 
 var itemName = sessionStorage.getItem('HsaveOverHaul_flag'); 
 var text_ms = sessionStorage.getItem('HsaveOverHaul_ms'); 

 var $ = layui.jquery,
     echarts = layui.echarts;

 /*************曲线图初始化*******************/
function getHcurve (time , val , mm){

var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');

option = {
   title: {
       text: mm,
       textStyle: {
           color: '#1aa094',
           left:'80px',
           fontSize:14,
       }
   },
   tooltip: {
       trigger: 'axis'
   },
   grid: {
       top:45,
       left: '3%',
       right: '4%',
       bottom: '15%',
       containLabel: true
   },
   xAxis: [{
       type: 'category',
       boundaryGap: true,
       data: time,
       axisLabel : {
           fontSize: 13,//字体大小
           interval:'auto',
           showMaxLabel:true,
           rotate:45
       },
       axisLine:{  
           lineStyle:{  
               color:'#1aa094',  
               width:2,//这里是为了突出显示加上的  
           }  
       },
   }],
   dataZoom: [
   {
       type: 'slider',
       realtime: true,
    //    height:12,
       bottom: 120,
       start: 0,
       end: 100,
   },
   {
       type: 'inside',
       realtime: true,
       start: 0,
       end: 100,
   }],
   yAxis: {
       type: 'value',
       axisLine:{  
           lineStyle:{  
               color:'#1aa094',  
               width:2,//这里是为了突出显示加上的  
           }  
       }
   },
   series: [
       {
           name:'数值  ',
           type:'line',
           showSymbol: false,//悬停才显示圆圈
        //    stack: '总量',
           data:val,
           itemStyle: {
               normal: {
                //    color:'rgb(255,87,34)'
                   color:'red'
                //    color:'#1aa094'
               },
           },
           markPoint : {
               data : [
                   {type : 'max', name: '最大值'},
                   {type : 'min', name: '最小值'}
               ]
           }
       }
   ]
};

    echartsPies.setOption(option);
};

/**********************************************/
            //2020-03-27 HF  请求曲线接口 
            $.ajax({          
                            url: '/oms-web/patrols/'+type+'/'+code+'/'+itemName+'/Curve/authority?token='+ token,
                            dataType:"json",  
                            type:"get", 
                            contentType:"application/json",
                           success:function(data){ if (data.code == -1) {
                          window.location = '../../login-1.html'
                      }

                                var time = [];
                                var val = [];
                            if(data.code === 0){
                                $('#Myloading2').remove();
                                for (let i = 0; i < data.data.length; i++) {
                                        time.push(data.data[i].patrolDate);
                                        val.push(data.data[i].patrolValue);
                                     }
                                    //  倒叙数组
                                     time.reverse();
                                     val.reverse();
                                     getHcurve(time,val,text_ms)
                            }else{
                                layer.msg(data.msg,{icon: 1,time:1000});
                            }
                        },
                            error:function () {
                                layer.msg("数据请求错误！");
                                    layer.close(index);
                            }
                 });
        });
</script>

</body>
</html>